<template>
    <div
        v-if="isTooltipVisible"
        :style="{ left: tooltipPosition.x + 'px', top: tooltipPosition.y + 'px' }"
        class="tooltip">
      <div v-html="showText"></div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      showText: '',
      isTooltipVisible: false,  // 控制提示框的显示/隐藏
      tooltipPosition: { x: 0, y: 0 },  // 提示框的位置
    };
  },
  methods: {
    // 处理鼠标移动事件
    open(properties,event) {
      this.showText = 'flag=>'+properties.flag+'<br>resultDesc=>'+properties.resultDesc;
      this.tooltipPosition.x = event.pageX + 10;  // 提示框水平位置，略微偏移
      this.tooltipPosition.y = event.pageY + 10;  // 提示框垂直位置，略微偏移
      this.isTooltipVisible = true;  // 鼠标移动时显示提示框
    },
    // 处理鼠标离开事件
    close() {
      this.showText = '';
      this.isTooltipVisible = false;  // 鼠标离开时隐藏提示框
    },
  }
};
</script>
<style scoped>
.tooltip {
  position: absolute;
  padding: 5px;
  color: #6c7375;
  border-radius: 5px;
  pointer-events: none; /* 让鼠标事件透过悬浮框 */
}
</style>